<template>
  <div class="info">
    <div class="image"><img src="static/img/default-user.png"></div>
    <div class="detail-info">
      <p class="name"><span>赵晓娜</span><i class="iconfont">&#xe690;</i></p>
      <p class="level">贫民</p>
      <p class="level-star"><img src="static/img/start.gif"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo'
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl';
    .info
      display: flex
      flex-wrap: wrap
      .image
        width: 1.44rem
        height: 1.44rem
        img 
          width: 100%
          height: 100%
      .image:hover
        cursor: pointer
      .image:hover::after
        content: '修改头像'
        width: 1.44rem
        line-height: .4rem
        background-color: rgba(0,0,0,0.4)
        color: #fff
        position: absolute
        text-align: center
        margin-left: -1.44rem
        margin-top: 1.04rem
        font-size: .24rem
      .detail-info
        display: flex
        flex-direction: column
        justify-content: space-around
        margin-left: .2rem
        .name
          font-weight: bold
        .name span:hover
          text-decoration: underline
          cursor: pointer
        .iconfont
          color: #d3d3d3
          margin-left: .1rem
        .iconfont:hover
          color: $font-light
          cursor: pointer
        .level
          margin-top: .1rem
          color: $font-light
          font-size: .24rem
        .level:hover
          cursor: pointer
          text-decoration: underline
</style>

